<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>搜索北京市的风景名胜</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
    <link rel="stylesheet" href="http://webapi.amap.com/ui/1.0/plug/ext/font-awesome/css/font-awesome.css?v=1.0.11"/>
    <!--<link rel="stylesheet" href="css/style.css"/>-->

    <style type="text/css">
        #panels {
            text-align: left;
        }

        #mapContainer {
            width: 100%;
            height: 94%;
        }

    </style>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.2&key=1c17c063e852213e8a14e1c54f03d31c&plugin=AMap.ToolBar"></script>
</head>
<body>

<div>
    <div id="mapContainer"></div>
    <div id="tip" style="display: none;"></div>
    <div id="menu"
         style="position:absolute;bottom: 0px;width: 100%;font-size: 14px;height: 6%;line-height: 2.5em;text-align:center; cursor: pointer;">
        <div id="closeMenu" class="amap_lib_placeSearch_page" style="text-align: center;" onclick="openMenu();">
            点击展开更多结果
        </div>
        <div id="closes"
             style="display: none;width:100%;text-align: center;"
             class="amap_lib_placeSearch_page"
             onclick="closeMenu();">关闭菜单
        </div>
        <div id="panels" style="display: none;">

            <div class="amap_lib_placeSearch">
                <div class="amap_lib_placeSearch_list">
                    <ul id="dataList" class="amap_lib_placeSearch_ul"></ul>
                </div>
                <div class="amap_lib_placeSearch_page"></div>
            </div>
        </div>
    </div>
</div>
</div>


<script type="text/javascript">

    var map, geolocation, markers;
    var marker = new Array();
    var positioning = new Array();
    var windowsArr = new Array();
    var carData = "";
    //加载地图，调用浏览器定位服务
    map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });

    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB',
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
        positioning = new AMap.LngLat(data.position.getLng(), data.position.getLat());
        var str = ['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if (data.accuracy) {
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');

        // map.clearMap();  // 清除地图覆盖物


        console.log(positioning);
        markers = [{
            position: [112.490159, 37.896667],
            tel: '0351-4999999',
            name: "大昌快修快保店",
            address: "太榆路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.490159, 37.896667))
        }, {
            position: [112.598383, 37.880061],
            tel: '0351-4777777',
            name: "大昌快修连锁(东中环店)",
            address: "太榆路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.598383, 37.880061))
        }, {
            position: [112.527897, 37.836514],
            tel: '0351-4888888',
            name: "大昌快修连锁(万水店)",
            address: "太榆路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.527897, 37.836514))
        }, {
            position: [112.593243, 37.851522],
            tel: '0351-4666666',
            name: "大昌快修连锁(服装城店)",
            address: "太榆路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.593243, 37.851522))
        }, {
            position: [112.528966, 37.918699],
            tel: '0351-4555555',
            name: "大昌快修连锁(翠馨苑店)",
            address: "平阳路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.528966, 37.918699))
        }, {
            position: [112.562937, 37.74709],
            tel: '0351-4555555',
            name: "大昌快修连锁(汾东北路店)",
            address: "平阳路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.562937, 37.74709))
        }, {
            position: [112.570869, 37.783998],
            tel: '0351-4555555',
            name: "大昌快修快保",
            address: "平阳路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.570869, 37.783998))
        }, {
            position: [112.602941, 37.773438],
            tel: '0351-4555555',
            name: "大昌快修快保(龙城大街店)",
            address: "平阳路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.602941, 37.773438))
        }, {
            position: [112.567574, 37.826365],
            tel: '0351-4555555',
            name: "大昌快修快保店",
            address: "平阳路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.567574, 37.826365))
        }, {
            position: [112.54732, 37.894913],
            tel: '0351-4555555',
            name: "大昌快修快保店",
            address: "平阳路",
            distance: AMap.GeometryUtil.distance(positioning, new AMap.LngLat(112.54732, 37.894913))
        }];

        var compare = function (prop) {
            return function (obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop];
                if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                    val1 = Number(val1);
                    val2 = Number(val2);
                }
                if (val1 < val2) {
                    return -1;
                } else if (val1 > val2) {
                    return 1;
                } else {
                    return 0;
                }
            }
        }
        console.log(markers.sort(compare("distance")));

        console.log(markers);
        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
        markers.forEach(function (mk, i) {
            var markerOption = {
                map: map,
                icon: new AMap.Icon({
                    image: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1155223203,2026278693&fm=58",
                    size: new AMap.Size(64, 64),  //图标大小
                    imageSize: new AMap.Size(32, 32)
                }),
                position: [mk.position[0], mk.position[1]],
                topWhenMouseOver: true

            };
            var mar = new AMap.Marker(markerOption);
            marker.push([mk.position[0], mk.position[1]]);

            var infoWindow = new AMap.InfoWindow({
                content: "<h3 style='padding: 0 6px 0 0'><font color=\"#00a6ac\">  " + (i + 1) + ". " + mk.name + "</font></h3>" + createContent("汽车快修", mk.address, mk.tel,mk.position,mk.name),
                autoMove: true,
                offset: new AMap.Pixel(0, -30)
            });
            windowsArr.push(infoWindow);
            var aa = function (e) {
                infoWindow.open(map, mar.getPosition());
            };
            mar.on("mouseover", aa);
            mar.on("click", aa);

            var resultStr = "";
            var distance = mk.distance >= 1000 ? parseFloat(mk.distance / 1000).toFixed(2) + '公里' : mk.distance + '米';
            resultStr += "<div id='divid" + (i + 1) + "' onclick='openMarkerTipById1(" + i + ",this)' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"https://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + mk.name + "</font></h3>";
            resultStr += createContent("汽车快修", mk.address, mk.tel,mk.position,mk.name) + "</td></tr></table></div>";

            carData += '<li class="poibox"><div class="amap_lib_placeSearch_poi poibox-icon">' + (i + 1) + '</div>' +
                    ' <div class="poi-img"style="background-image:url(http://store.is.autonavi.com/showpic/7e98155994979b89b9b3704ef394a824?operate=merge&w=90&h=56&position=5)"></div> ' +
                    '<h3 class="poi-title"><span class="poi-name" style="font-weight: bold;">' + mk.name + '</span> <a class="poi-more" title="详情"></a> </h3> ' +
                    '<div class="poi-info" style="width: 60%;float:left;"><p class="poi-addr">地址：' + mk.address + ' (' + distance + ')' + '</p> '+
                    '<p class="poi-tel">电话：' + mk.tel + '</p>' +
                    '</div>'+
                    '<div style="width: 30%; float: right;margin-top: -10px;margin-bottom: 4px">' +
                    '<div class="tel" style="float:left;padding: 0 4px;text-align: center"><a href="tel:'+mk.tel+'" style="color: #268bef;text-decoration: none"><span class="fa-stack fa-lg" style="display: block">' +
                    '  <i class="fa fa-circle-o fa-stack-2x"></i>' +
                    '  <i class="fa fa-phone fa-stack-1x"></i>' +
                    '</span>电话</a></div>' +
                    '<div class="destination" style="float:left;padding: 0 4px;text-align: center"><a href="https://gaode.com/dir?from[name]=当前位置&from[lnglat]='+positioning[0]+','+positioning[1]+'&to[name]='+mk.name+'&to[lnglat]='+mk.position[0]+','+mk.position[1]+'&policy=1&type=car" style="color: #268bef;text-decoration: none"><span class="fa-stack fa-lg" style="display:block">' +
                    '  <i class="fa fa-circle fa-stack-2x "></i>' +
                    '  <i class="fa fa-level-up fa-stack-1x fa-inverse"></i>' +
                    '</span>路线</a></div></div> <div class="clear"></div>'
            map.setFitView();
        });

        map.setFitView();
        var center = map.getCenter();
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }

    //基本地图加载
    function placeSearch() {
        var placeSearch;
        AMap.service(["AMap.PlaceSearch"], function () {
            placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                type: '汽车服务|汽车销售|汽车维修',
                city: "太原市",//城市
                panel: "panel",
                pageIndex: 1,
                pageSize: 5,
            });
            //关键字查询
            placeSearch.search('大昌', function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    keywordSearch_CallBack(result);
                }
            });
        });
    }

    placeSearch();

    //回调函数
    function keywordSearch_CallBack(data) {}

    function parseStr(p) {
        if (!p || p == "undefined" || p == " undefined" || p == "tel") {
            p = "暂无";
        }
        return p;
    }

    function createContent(type, address, tel,position,name) {  //窗体内容
        console.log(positioning);
        type = parseStr(type);
        address = parseStr(address);
        tel = parseStr(tel);
        var s = [];
        s.push("地址：" + address);
        s.push("电话：" + tel);
        s.push("类型：" + type);
        return '<div style="float: left">' + s.join("<br>") + '</div><div style="width: 34px;float: right;height: 34px;color: #333;margin:0 6px 0 12px;">' +
                '<a href="https://gaode.com/dir?from[name]=当前位置&from[lnglat]='+positioning.getLng()+','+positioning.getLat()+'&to[name]='+name+'&to[lnglat]='+position[0]+','+position[1]+'&policy=1&type=car" style="color: #268bef;text-decoration: none"><span class="fa-stack fa-2x" style="display:block">' +
                '  <i class="fa fa-circle fa-stack-2x "></i>' +
                '  <i class="fa fa-level-up fa-stack-1x fa-inverse"></i>' +
                '</span></a></div>';
    }

    function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
        alert("nimad");
        thiss.style.background = '#CAE1FF';
        windowsArr[pointid].open(map, marker[pointid]);
    }

    function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
        thiss.style.background = "";
    }

    function openMenu() {
        document.getElementById("closeMenu").style.display = "none";
        document.getElementById("panels").style.display = "block";
        document.getElementById("closes").style.display = "block";
        document.getElementById("menu").style.height = '45%';
        document.getElementById("mapContainer").style.height = '55%';
        document.getElementById("dataList").innerHTML = carData;
    }

    function closeMenu() {
        document.getElementById("closeMenu").style.display = 'block';
        document.getElementById("panels").style.display = 'none';
        document.getElementById("menu").style.height = '6%';
        document.getElementById("mapContainer").style.height = '94%';
        document.getElementById("closes").style.display = "none";
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>